<!-- 单位编码新增页面弹窗 -->
<template>
  <div>
    <el-dialog :title="addTitle" :visible.sync="show" v-if="show" :close-on-click-modal="false" width="900px" top="6vh" v-dialogDrag @close="cancel()">
      <!--<div class="dialog-container">-->
        <el-form :model="addForm" :rules="myRules" ref="addForm" size="mini" label-width="130px">
          <el-row>
            <el-col :span="11">
              <el-form-item label="单位编码" prop="dwbmxs">
                <el-input v-model="addForm.dwbmxs">
                  <template slot="prepend">{{sjdw}}</template>
                </el-input>
              </el-form-item>

              <el-form-item label="单位全称" prop="dwqc">
                <el-input v-model="addForm.dwqc"></el-input>
              </el-form-item>

              <el-form-item label="单位性质" prop="dwxzm">
                <el-select v-model="addForm.dwxzm" @change="getDwxz" style="width:100%">
                  <el-option
                    v-for="item in dwxzCombo"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="电网名" prop="dwm">
                <el-input v-model="addForm.dwm"></el-input>
              </el-form-item>

              <el-form-item label="地区名" prop="dqm">
                <el-input v-model="addForm.dqm"></el-input>
              </el-form-item>

              <el-form-item label="调度名" prop="ddm">
                <el-input v-model="addForm.ddm"></el-input>
              </el-form-item>

              <el-form-item label="注册日期" prop="zcrq">
                <el-date-picker type="date" v-model="addForm.zcrq" value-format="yyyy-MM-dd" style="width:100%"></el-date-picker>
              </el-form-item>

              <el-form-item label="基础数据" prop="jcsj">
                <el-radio v-model="addForm.jcsj" label="1">有</el-radio>
                <el-radio v-model="addForm.jcsj" label="">无</el-radio>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="单位名称" prop="dwmc">
                <el-input v-model="addForm.dwmc"></el-input>
              </el-form-item>

              <el-form-item label="单位简称" prop="dwjc">
                <el-input v-model="addForm.dwjc"></el-input>
              </el-form-item>

              <el-form-item label="资产性质" prop="zcxzm">
                <el-select v-model="addForm.zcxzm" @change="getZcxz" style="width:100%">
                  <el-option
                    v-for="item in zcxzCombo"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="电网单位" prop="dwdw">
                <el-input v-model="addForm.dwdw" disabled>
                  <el-button slot="append" type="primary" class="button-choose" @click="dwdwSelect">选择</el-button>
                </el-input>
              </el-form-item>

              <el-form-item label="控股单位" prop="kgdw">
                <el-input v-model="addForm.kgdw" disabled>
                  <el-button slot="append" type="primary" class="button-choose" @click="kgdwSelect">选择</el-button>
                </el-input>
              </el-form-item>

              <el-form-item label="调度单位" prop="dddw">
                <el-input v-model="addForm.dddw" disabled>
                  <el-button slot="append" type="primary" class="button-choose" @click="dddwSelect">选择</el-button>
                </el-input>
              </el-form-item>

              <el-form-item label="注销日期" prop="zxrq">
                <el-date-picker type="date" v-model="addForm.zxrq" value-format="yyyy-MM-dd" style="width:100%"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      <!--</div>-->
      <div slot="footer">
        <el-button size="mini" type="primary" @click="add()">确 定</el-button>
        <el-button size="mini" type="warning" @click="cancel()">取 消</el-button>
      </div>
    </el-dialog>

    <GetDwbm :treeObj="treeObj" ref="getDwbmRef" @handleGetDwbm="handleGetDwbm"></GetDwbm>

  </div>
</template>

<script>
  import { addUnitCode,referUnitCode } from "@/api/dmgl/dwbm";
  import { getDictCombo } from "@/api/tools/dict";
  import { compareDate } from "@/utils/validate";
  import { checkChar } from "@/utils/formValidate";
  import GetDwbm from "@/dialogCommom/GetDwbm"

  export default {
    name: 'dwbmAdd',
    components: {
      GetDwbm: GetDwbm
    },
    data() {
      // 验证单位编码唯一
      const validateDwbm = (rule, value, callback) => {
        let val = value + ''
        if (val) {
          if (/^([0-9]{2})$/.test(val)) {
            // 用户编码唯一性验证
            let dwbm = this.sjdw + val
            referUnitCode(dwbm).then(res => {
              if (res.code == 0 && res.data == null) {
                callback()
              } else {
                callback('单位编码已经存在')
              }
            })
          } else {
            callback('请输入2位数字编码')
          }
        }
      }
      return{
        addTitle: '单位编码新增',
        show: false,
        sjdw: '', // 上级单位
        addForm: { // 表单属性
          dwbmxs: '', //单位编码下属
          dwmc: '',
          dwqc: '',
          dwjc: '',
          dwxzm: '',
          zcxzm: '',
          dwm: '',
          dqm: '',
          ddm: '',
          dwdw: '',
          kgdw: '',
          dddw: '',
          zcrq: '',
          zxrq: '',
          jcsj: '',
        },
        addFormHide: { // 其他隐藏属性
          dwbm: '',
          dwxz: '',
          zcxz: '',
        },
        dwxzCombo: [],
        zcxzCombo: [],
        treeObj: { // 传给选择单位编码组件的值
          type: 'radio',
          dwbm: ''
        },
        dwlx: '', // 单位类型 1-电网单位 2-控股单位 3-调度单位
        myRules: {
          dwbmxs: [
            {required: true, message: '请输入2位单位编码', trigger: 'blur'},
            {validator: validateDwbm, trigger: 'blur'},
          ],
          dwmc: [
            {required: true, message: '请输入单位名称', trigger: 'blur'},
            {validator: checkChar, trigger: 'blur'},
          ],
          dwqc: [{validator: checkChar, trigger: 'blur'}],
          dwjc: [{validator: checkChar, trigger: 'blur'}],
          dwm: [{validator: checkChar, trigger: 'blur'}],
          dqm: [{validator: checkChar, trigger: 'blur'}],
          ddm: [{validator: checkChar, trigger: 'blur'}],
          dwxzm: [{required: true, message: '请选择单位性质', trigger: 'change'}],
        },
      }
    },
    props: {
      addData: {
        type: Object,
        default: function() {
          return {};
        }
      }
    },
    watch: {
      addData: {
        deep: true,
        handler(newVal, oldVal) {
          if (newVal.show) {
            const that = this
            that.show =  newVal.show;
            that.sjdw =  newVal.sjdw;
            this.dictOptData(); // 获取字典值
          }
        }
      }
    },

    created() {

    },

    mounted() {

    },

    methods: {
      add() {
        this.$refs['addForm'].validate((valid) => {
          if (valid) {
            if(!this.addForm.zcrq && this.addForm.zxrq){
              this.$message.warning("不能只有注销日期！");
              return;
            }
            if(this.addForm.zcrq && this.addForm.zxrq){
              if(compareDate(this.addForm.zcrq,this.addForm.zxrq)){
                this.$message.warning("注销日期不能早于注册日期！");
                return;
              }
            }
            this.addFormHide.dwbm = this.sjdw + this.addForm.dwbmxs;
            let vo = Object.assign({}, this.addForm, this.addFormHide); // 合并属性
            // 提交数据
            addUnitCode(vo).then(res => {
              if (res.code == 0) {
                this.$message.success( "添加成功！");
                this.cancel()
                this.$parent.treeReload() // 调用父页面方法
                this.$parent.getList() // 调用父页面方法
              } else {
                this.$message.error("添加失败！");
              }
            });
          }else{
            this.$message.warning( "请检查填写数据项是否缺失或错误！");
          }
        });
      },
      cancel() {
        this.show = false;
        // 重置表单及参数
        this.$refs['addForm'].resetFields();
        this.addFormHide = {};
      },
      // 获取字典下拉数据
      async dictOptData() {
        let dwxzRes = await getDictCombo({"typeCode":"dict_dwxz"});
        let zcxzRes = await getDictCombo({"typeCode":"dict_zcxz"});
        if(dwxzRes.code == 0){
          this.dwxzCombo = dwxzRes.data;
        }
        if(zcxzRes.code == 0){
          this.zcxzCombo = zcxzRes.data;
        }
      },
      getDwxz(val) {
        let obj = {};
        obj = this.dwxzCombo.find((item)=>{
          return item.value === val; // 筛选出匹配数据
        });
        this.addFormHide.dwxz = obj.text;
      },
      getZcxz(val) {
        let obj = {};
        obj = this.zcxzCombo.find((item)=>{
          return item.value === val; // 筛选出匹配数据
        });
        this.addFormHide.zcxz = obj.text;
      },
      handleGetDwbm(val) {
        /** 1为电网单位 2为控股单位 3为调度单位 */
        const that = this
        if(that.dwlx == 1){
          that.addForm.dwdw = val.id
        }else if(that.dwlx == 2){
          that.addForm.kgdw = val.id
        }else if(that.dwlx == 3){
          that.addForm.dddw = val.id
        }
      },
      dwdwSelect() {
        this.$refs.getDwbmRef.show = true;
        this.dwlx = 1;
      },
      kgdwSelect() {
        this.$refs.getDwbmRef.show = true;
        this.dwlx = 2;
      },
      dddwSelect() {
        this.$refs.getDwbmRef.show = true;
        this.dwlx = 3;
      },
    }
  }
</script>

<style scoped lang='scss'>
  /deep/ .el-dialog__body {
    padding-top: 20px;
    padding-bottom: 1px;
    border-top: 1px solid #e8eaec;
    border-bottom: 1px solid #e8eaec;
  }
  /deep/ .el-dialog__header {
    padding: 10px 10px 10px;
  }
  /deep/ .el-dialog__footer {
    padding: 10px 10px 10px;
  }
  .dialog-container{
    height: 50vh;
    overflow: auto;
  }
  .button-choose {
    background-color: #409EFF !important;
    border-color: #409EFF !important;
    color: #ffffff !important;
  }
</style>
